<template>
  <view class="Toast" v-if="flag">
    <view :class="'container ' + toastAnimate">
      <view class="title" v-if="title != ''">{{ title }}</view>
      <view class="content" v-if="content != ''">
        {{ content }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
      time: 3000,
      toastAnimate: "",
      title: "",
      content: "",
    };
  },
  methods: {
    show: function (json) {
      const that = this;
      const onOpen = json.onOpen != undefined ? json.onOpen : null;
      const onClose = json.onClose != undefined ? json.onClose : null;
      that.time = json.time != undefined ? json.time : 3000;
      that.title = json.title != undefined ? json.title : "";
      that.content = json.content != undefined ? json.content : "";
      that.flag = true;
      that.toastAnimate = "toastAnimate";
      onOpen && onOpen();
      setTimeout(function () {
        that.toastAnimate = "toastAnimateOut";
        setTimeout(function () {
          that.flag = false;
          onClose && onClose();
        }, 500);
      }, that.time);
    },
  },
};
</script>
<style scoped lang="scss">
.Toast {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  & > .container {
    position: absolute;
    top: 50%;
    left: 50%;
    height: auto;
    max-width: 70%;
    padding: 40rpx 60rpx;
    border-radius: 20rpx;
    transform: translate(-50%, -50%) scale(0);
    background-color: #fff;
    opacity: 0;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

    & > .title {
      width: 100%;
      color: #1d1d23;
      padding: 0 0 20rpx 0;
      text-align: center;
      box-sizing: border-box;
      font-size: 32rpx;
      font-weight: bold;
    }
    & > .content {
      width: 100%;
      text-align: center;
      box-sizing: border-box;
      font-size: 24rpx;
      color: #777777;
      font-weight: 400;
      word-break: break-all;
    }
  }

  .toastAnimateOut {
    animation: toastAnimateOut 0.3s ease-out forwards;
  }
  .toastAnimate {
    animation: toastAnimate 0.3s ease-out forwards;
  }
  @keyframes toastAnimate {
    0% {
      transform: translate(-50%, -50%) scale(0);
      opacity: 0;
    }
    60% {
      transform: translate(-50%, -50%) scale(1.2);
      opacity: 1;
    }
    80% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
  }
  @keyframes toastAnimateOut {
    0% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
    30% {
      transform: translate(-50%, -50%) scale(1.2);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(0);
      opacity: 0;
    }
  }
}
</style>
